<template>
  <div class="detailContainer">
    <div class="searchContainer">
      <el-form ref="form" :model="searchData" :inline="true">
        <el-form-item label="网点" size="mini">
          <el-select v-model="searchData.website" style="width: 120px">
            <el-option
              v-for="website in websiteList"
              :key="website.id"
              :label="website.name"
              :value="website.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="发车时间" size="mini">
          <el-date-picker
            v-model="searchData.createTime"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
            style="width: 220px"
          />
        </el-form-item>
        <el-form-item label="车牌号" size="mini">
          <el-input v-model="searchData.carNumber"></el-input>
        </el-form-item>
        <el-form-item size="mini">
          <el-button type="primary" icon="el-icon-search" @click="searchList"
            >查询</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="operation">
      <el-button plain type="primary" @click="exportList">导出</el-button>
      <el-button plain type="primary" @click="printList">打印</el-button>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalListNum"
      >
      </el-pagination>
    </div>
    <el-table
      :data="orders"
      border
      align="center"
      @selection-change="handleSelectionChange"
      style="width: 100%"
    >
      <el-table-column type="selection" width="45"> </el-table-column>
      <el-table-column
        prop=""
        fixed
        label="序号"
        width="50"
        type="index"
      ></el-table-column>
      <el-table-column prop="car_no" fixed label="车牌号" width="100">
        <template slot-scope="scope">
          <div style="cursor: pointer; color: blue">
            {{ scope.row.car_no }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="website" label="网点" width="180">
      </el-table-column>
      <el-table-column prop="waybill_no" label="运单号" width="180">
      </el-table-column>
      <el-table-column prop="create_time" label="开单时间" width="180">
        <template slot-scope="scope">
          {{
            new Date(Number(scope.row.create_time) * 1000)
              .toLocaleString()
              .replace(/:\d{1,2}$/, " ")
          }}
        </template>
      </el-table-column>
      <el-table-column prop="departure_time" label="实际发车时间" width="180">
      </el-table-column>
      <el-table-column prop="number" label="件数" width="180">
      </el-table-column>
      <el-table-column prop="weight" label="重量（单位：千克）" width="180">
        <template slot-scope="scope">
          {{ scope.row.weight / 1000 }}
        </template>
      </el-table-column>
      <el-table-column prop="volume" label="体积（单位：立方米）" width="180">
        <template slot-scope="scope">
          {{ scope.row.volume / 1000000 }}
        </template>
      </el-table-column>
      <el-table-column prop="route" label="路由" width="180"> </el-table-column>
      <el-table-column prop="arrival_pay" label="到付" width="180">
        <template slot-scope="scope">
          {{ scope.row.arrival_pay / 100 }}
        </template>
      </el-table-column>
      <el-table-column prop="agent_collection" label="代收货款" width="180">
        <template slot-scope="scope">
          {{ scope.row.agent_collection / 100 }}
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="运单备注" width="180">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import pagination from "@/components/pagination";
import { reqWebsiteList } from "@/api/waybill";
import { getVehicleWorkDetailList } from "@/api/report";
import { setToken, getToken } from "@/utils/auth";
export default {
  name: "detail",
  data() {
    return {
      selectedNums: [], //选中的单号
      websiteList: [], //网点
      searchData: {
        website: "", //网点
        createTime: [
          new Date().setTime(new Date().setDate(1)),
          new Date().getTime(),
        ], //发车时间
        carNumber: "",
      }, //查询条件
      pickerOptions: {
        // 时间选择器的快选项
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      pageNum: 1, //目前在第几页
      totalListNum: 100, //列表总数
      pageSize: 100, //一页多少条
      //测试用
      orders: [],
      selectedOrders: [],
      selectedDetails: [],
    };
  },
  components: { pagination },
  mounted() {
    this.displayOrders("");
    this.getWebsiteList();
  },
  computed: {
    isAll() {
      return this.selectedOrders.length === this.orders.length;
    },
  },
  methods: {
    async getWebsiteList() {
      let result = await reqWebsiteList({ type: "0" });
      this.websiteList = result.data;
    },
    async displayOrders(id) {
      this.searchData.carNumber = id;
      var cookie = getToken("Cookie");
      const { pageNum, pageSize, searchData } = this;
      let result = await getVehicleWorkDetailList({
        website_id: String(searchData.website),
        car_no: id,
        start_time: String(parseInt(searchData.createTime[0] / 1000)),
        end_time: String(parseInt(searchData.createTime[1] / 1000)),
        page: String(pageNum),
        page_size: String(pageSize),
      });
      this.orders = result.data.data;
      this.pageNum = result.data.pagination.page * 1;
      this.totalListNum = result.data.pagination.total * 1;
      this.pageSize = result.data.pagination.page_size * 1;
    },
    searchList() {
      //查询功能
      this.displayOrders(this.searchData.carNumber);
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pageSize = val; //一页多少条
      this.displayOrders(this.pageNum, this.pageSize);
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.pageNum = val; //第多少页
      this.displayOrders(this.pageNum, this.pageSize);
    },
    handleSelectionChange(checked) {
      this.selectedOrders = checked.map((item) => item.id);
    },
    exportList() {
      //导出
      // console.log("导出");
    },
    printList() {
      //打印
      // console.log("打印");
    },
  },
};
</script>

<style scoped lang="less">
.detailContainer {
  background-color: #fff;
  .searchContainer {
    padding: 0 20px;
    border-bottom: 7px solid #e8f1f7;
  }
  .operation {
    padding-top: 5px;
    height: 35px;
    ::v-deep .el-pagination {
      float: right;
      .el-input--mini .el-input__inner {
        height: 24px;
      }
    }
  }
  .displayArea {
    background-color: #fff;
    overflow: auto; //显示自带的滚动条
    white-space: nowrap;
    height: 100%;
    table {
      font-size: 12px;
      border: 1px solid #cccccc;
      border-collapse: collapse;
      //排第一二三的元素加定位,然后给排第四的元素加左外边距
      th:nth-child(1),
      td:nth-child(1) {
        width: 40px;
        text-align: center;
        background-color: inherit; //继承背景颜色
        vertical-align: inherit; //设置元素的基线对齐方式
        position: absolute;
        left: 0px;
        z-index: 1;
      }
      th:nth-child(2),
      td:nth-child(2) {
        width: 40px;
        text-align: center;
        background-color: inherit;
        vertical-align: inherit;
        position: absolute;
        left: 40px;
        z-index: 1;
      }
      th:nth-child(3),
      td:nth-child(3) {
        width: 150px;
        background-color: inherit;
        vertical-align: inherit;
        position: absolute;
        left: 80px;
        z-index: 1;
        cursor: pointer;
        color: #409eff;
      }
      th:nth-child(4),
      td:nth-child(4) {
        margin-left: 233px;
      }
      tr {
        background-color: #fff;
        &:nth-child(even) {
          background: #e9e9e9;
        }
        th,
        td {
          text-align: center;
          border: 1px solid #cccccc;
          display: inline-block;
          width: 183px;
          height: 31px;
          line-height: 31px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          word-break: break-all;
        }
        // &:nth-child(2) {
        //   background-color: #fff !important;
        // }
      }
    }
  }
}
</style>